/**
 * 组件：消息对话组件
 * @author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import Util from '../utils/util';
import MessageBuble from './comp.message-say-bubble'

class MessageSayItem extends Component {

    static propTypes = {
        headUrl: PropTypes.number,                       //说话人头像
        nickName: PropTypes.string,                      //说话人昵称
        gender: PropTypes.string,                        //说话人性别
        job: PropTypes.oneOf(["normal", "admin"]),         //说话人角色
        city: PropTypes.string,                          //城市
        message: PropTypes.string,                       //消息内容
        createTime: PropTypes.string,                    //消息时间
        onPress: PropTypes.func,
    }

    static defaultProps = {
        headUrl: require('../../img/video_topImg.png'),
        nickName: '浪的宣言',
        gender: 'male',
        job: 'normal',
        city: '无锡市',
        message: '我也是服了~~~',
        createTime: '19:49',
    }

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {

    }

    genGenderUI() {
        const {gender} = this.props
        if (gender) {
            const genderUrl = gender == "male" ? require('../../img/gender_boy.png') : require('../../img/gender_girl.png');
            return (<Image style={styles.genderIcon} source={genderUrl}/>);
        }
    }


    genCityUI() {
        const {gender, city, genderUrl} = this.props
        let genderStyle = styles.cityLabelGirl;
        if (gender && gender == 'male') {
            genderStyle = styles.cityLabelBoy;
        }
        if (city) {
            return (<View style={[styles.cityLabel, genderStyle]} source={genderUrl}>
                <Text style={styles.cityName}>{city}</Text>
            </View>);
        }
    }


    render() {
        const {headUrl, nickName, gender, job, city, message, createTime, onPress} = this.props
        return (
            <View>
                <View style={styles.container}>
                    <View style={styles.leftPanel}>
                        <Image style={styles.imageIcon} source={headUrl}/>
                    </View>
                    <View style={styles.rightPanel}>
                        <View style={styles.topTitlePanel}>
                            <Text style={styles.nickName}>{nickName}</Text>
                            {this.genGenderUI()}
                            {this.genCityUI()}
                        </View>
                        <View style={styles.messageContainer}>
                            <MessageBuble message={message}/>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        // borderWidth:1,
    },
    leftPanel: {
        width: 56,
        alignItems: 'center',
        // justifyContent: 'center',
        // backgroundColor:'red',
    },
    imageIcon: {
        width: 40,
        height: 40,
        borderRadius: 5,
        backgroundColor: 'gray',
        marginTop:10,
    },
    rightPanel: {
        flex: 1,
        padding: 10,
    },
    topTitlePanel: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingBottom: 10,
    },
    nickName: {
        fontSize: 12,
        color: '#757575',
    },
    genderIcon: {
        width: 16,
        height: 16,
        marginLeft:5,
    },
    cityLabel: {
        height: 16,
        borderRadius: 2,
        alignItems:'center',
        justifyContent:'center',
        paddingLeft:2,
        paddingRight:2,
        marginLeft:5,
    },
    cityLabelGirl: {
        backgroundColor: '#ec7280'
    },
    cityLabelBoy: {
        backgroundColor: '#99ccff'
    },
    cityName: {
        fontSize:9,
        color:'white',
        backgroundColor:'transparent',
    },
    rightTitle: {
        fontSize: 12,
        color: '#6F6F6F',
        textAlign: 'right',
    },
    messageContainer:{
        alignItems:'flex-start',
    },


});

export default MessageSayItem;